<template>
    <div>
        <Upload type="drag" :accept="accept" action="" :beforeUpload="handleBeforeUploadExcel">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或者拖曳文件到此处上传</p>
            </div>
            <p slot="tip"><Icon type="information-circled"></Icon>只能传zip包</p>
        </Upload>
        <ul class="ivu-upload-list" v-show="hasFile">
            <li class="ivu-upload-list-file ivu-upload-list-file-finish">
                <span><i :class="listFileStyle"></i>{{value.name}}</span>
                <i class="ivu-icon ivu-icon-ios-close-empty ivu-upload-list-remove" @click="removeUpload"></i>
            </li>
        </ul>
    </div>
</template>

<script>
    /**
     * 相对于 HorzionUploader 更加通用
     */
    export default {
        name: 'HorizonUploader2',
        props:{
            accept:String,
            listFileStyle:{
                type:String,
                default:"ivu-icon ivu-icon-document"
            },
            value:'',
            format: {
                type: Array,
                default () {
                    return [];
                }
            },
        },
        data() {
            return {
                uploadFile: "",
            };
        },
        computed: {
            hasFile:function () {
                if(this.value) return true
                return false
            },
        },
        methods: {
            handleBeforeUploadExcel(file){
                if(this.checkFormat(file)){
                    this.$emit('input',file)
                }
                return false
            },
            removeUpload(){
                this.$emit('input',"")
            },
            checkFormat(file){
                if (this.format.length) {
                    const _file_format = file.name.split('.').pop().toLocaleLowerCase();
                    const checked = this.format.some(item => item.toLocaleLowerCase() === _file_format);
                    if (!checked) {
                        this.$Notice.warning({
                            title: '文件格式不符合要求',
                            desc: `文件 ${file.name} 格式不正确,请选择zip包.`
                        });
                        return false;
                    }
                }
                return true
            }
        }
    };
</script>
